import React, { JSX } from 'react';
import { NulDialog, NulCommonOperations, NulFormItem } from '../../components/NulDialog';
import { FormControl, MenuItem, Select, TextField, Typography } from '@mui/material';
import { useAppDispatch } from '../../actions/hook';
import '@fontsource/open-sans';
import { CustomerEntry, modifyCustomer } from '../../actions/CustomerManagement';

interface ModifyCustomerProps {
  open: boolean;
  onClose: () => void;
  customerEntry: CustomerEntry;
}

function ModifyCustomer(props: ModifyCustomerProps): JSX.Element {
  const { open, onClose, customerEntry } = props;

  const [name, setName] = React.useState<string>(customerEntry.name);
  const [type, setType] = React.useState<string>(customerEntry.type);
  const [phone, setPhone] = React.useState<string>(customerEntry.phone);
  const [address, setAddress] = React.useState<string>(customerEntry.address);
  const [notes, setNotes] = React.useState<string>(customerEntry.notes);

  React.useEffect(() => {
    setName(customerEntry.name);
    setType(customerEntry.type);
    setPhone(customerEntry.phone);
    setAddress(customerEntry.address);
    setNotes(customerEntry.notes);
  }, [customerEntry]);

  const dispatch = useAppDispatch();

  const onModifyClicked = () => {
    dispatch(modifyCustomer({
      id: customerEntry.id,
      name, type, phone, address, notes
    }));
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Edit Customer'
      operations={
        <NulCommonOperations
          onPositiveClicked={onModifyClicked}
          onNegativeClicked={onClose}
          positiveText='Modify'
        />
      }
    >
      <NulFormItem hint='UID' necessary={false} component={
        <Typography>{customerEntry.id}</Typography>
      } />
      <NulFormItem hint='Type' component={
        <FormControl fullWidth size='small'>
          <Select
            labelId="type-select-label"
            id="type-select"
            value={type}
            placeholder="Type"
            onChange={(event) => {
              if (event.target.value === 'wholesale' || event.target.value === 'retail')
                setType(event.target.value);
            }}
          >
            <MenuItem value='wholesale'>Wholesale</MenuItem>
            <MenuItem value='retail'>Retail</MenuItem>
          </Select>
        </FormControl>
      } />
      <NulFormItem hint='Phone' component={
        <TextField placeholder='Phone Number' fullWidth={true} size='small' value={phone} onChange={(event) => { setPhone(event.target.value); }} />
      } />
      <NulFormItem hint='Address' component={
        <TextField placeholder='Address' fullWidth={true} size='small' value={address} onChange={(event) => { setAddress(event.target.value); }} />
      } />
      <NulFormItem necessary={false} hint='Notes' component={
        <TextField placeholder='Notes' fullWidth={true} size='small' value={notes} onChange={(event) => { setNotes(event.target.value); }} />
      } />
    </NulDialog>
  );
}

export { ModifyCustomer };